<template>
	<div class="hongbao" style="background: #F7F7F7;">
		<mt-header fixed title="现金红包" style="background: #fff;color: #000;">
			<div slot="left">
				<mt-button @click="back()" icon="back"></mt-button>
			</div>
		</mt-header>
		<div class="content_top">
		  <img src="@/assets/beijing1.png" alt="">
		</div>
		<div class="content_bottom" style="padding: 5px;">
			<div class="border_list">
				<div class="border_img">
					<img src="@/assets/hongbao.png" alt="">
				</div>
				<div class="border_text">
					<div class="text_left">
						<div class="left_top">奖励30元</div>
						<div class="left_bottom">完成注册 只需30秒</div>
					</div>
					<div class="text_right">
						<div class="text_btn" v-if="zhuce==false">去完成</div>
						<div class="text_btn active" v-if="zhuce==true">领取</div>
					</div>
				</div>
			</div>
			<div class="border_list">
				<div class="border_img">
					<img src="@/assets/hongbao.png" alt="">
				</div>
				<div class="border_text">
					<div class="text_left">
						<div class="left_top">奖励30元</div>
						<div class="left_bottom">完成3次模拟交易 <span style="color: #e47300;">0</span>/3</div>
					</div>
					<div class="text_right">
						<div class="text_btn" @click="moni">去完成</div>
					</div>
				</div>
			</div>
			<div class="border_list">
				<div class="border_img">
					<img src="@/assets/hongbao.png" alt="">
				</div>
				<div class="border_text">
					<div class="text_left">
						<div class="left_top">奖励17元</div>
						<div class="left_bottom">任意金额充值一次</div>
					</div>
					<div class="text_right">
						<div class="text_btn" @click="rec">去完成</div>
					</div>
				</div>
			</div>
			<div class="border_list">
				<div class="border_img">
					<img src="@/assets/hongbao.png" alt="">
				</div>
				<div class="border_text">
					<div class="text_left">
						<div class="left_top">奖励50元</div>
						<div class="left_bottom">完成5次实盘交易 <span style="color: #e47300;">0</span>/5</div>
					</div>
					<div class="text_right">
						<div class="text_btn" @click="jiaoyi">去完成</div>
					</div>
				</div>
			</div>
			<div class="border_list">
				<div class="border_img">
					<img src="@/assets/hongbao.png" alt="">
				</div>
				<div class="border_text">
					<div class="text_left">
						<div class="left_top">奖励50元</div>
						<div class="left_bottom">累计充值超过500元</div>
					</div>
					<div class="text_right">
						<div class="text_btn" @click="rec">去完成</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	
	export default {
	    name: "demo",
	    data() {
	        return {
				zhuce:true,
	        };
	    },
	    mounted() {
	        
	    },
		methods:{
			back(){
			    this.$router.go(-1)
			},
			rec(){
				this.$router.push({ path:'rec'})
			},
			jiaoyi(){
				// this.$router.push({path: "klinepage"});
			},
			moni(){
				this.$router.push({ path:'moni'})
			},
		}
	};
</script>

<style>
	.text_right .active{
		background: #C21F39;
		color: #fff !important;
	}
	.content_top{
		width: 100%;height: 3rem;
		overflow: hidden;
		margin-top: 80px;
	}
	.content_top img{
		width: 100%;height: 100%;
	}
	.border_list{
		background: #fff;
		height: 160px;
		width: 100%;
		border-radius: 5px;
		border: 1px solid #EFEFEF;
		overflow: hidden;
		display: flex;
		padding: 10px;
		box-sizing: border-box;
		margin: 10px 0;
	}
	.border_list .border_img{
		box-sizing: border-box;
		padding: 0.25rem;
		width: 20%;height: 100%;
		overflow: hidden;
	}
	.border_list .border_img img{
		width: 100%;height: 100%;
	}
	.border_list .border_text{
		width: 75%;height: 100%;
		overflow: hidden;
		display: flex;
	}
	.border_list .border_text .text_left,
	.border_list .border_text .text_right{
		width: 50%;height: 100%;overflow: hidden;
		box-sizing: border-box;
		padding-top: 45px;
	}
	.border_list .border_text .text_left .left_top{
		color: #e47300;
		font-size: 28px;
		font-weight: 650;
	}
	.border_list .border_text .text_left .left_bottom{
		font-size: 20px;
		color: #8E8E8E;
	}
	.border_list .border_text .text_right .text_btn{
		float: right;
		width: 50%;
		height: 45px;
		border: 2px solid #B3262C;
		border-radius: 5px;
		color: #B3262C;
		line-height: 45px;
		text-align: center;
		margin: 5px 0 0 50px;
	}

</style>
